Copyright: Copyright © Mark Carrington 1998, 1999
Citation: http:


Welcome to Constructor HTML Editor

The Constructor HTML Editor is an advanced code-based HTML editor for Microsoft Windows 95, 98 or NT 4. It includes a wide variety of wizards and toolbars for quickly inserting virtually all of the HTML tags you will need to create a document.

The main toolbars are similar to the ones you will find in most word processors, and perform similar functions. However, instead of the bold button actually placing the selected text in bold, it will instead place the HTML tags (<b> and </b>)around the text to make it appear in bold when the file is viewed in a web browser.

See the list of available wizards in Constructor

See a description of the toolbar buttons in Constructor

To see information about more topics, see the contents page by clicking on the Contents button above.

If you prefer to learn by example, have a look at some of the web pages in the Examples folder.


Wizards

Constructor includes a wide range of wizards to create and edit many HTML tags. You can even create your own wizards using the Constructor Development Kit.

As well as the wizards, Constructor also includes a number of toolbar items to speed up development.

Below is a list of the available wizards in Constructor. Click on the name of the wizard to see more information about it.

 Document Options

 Tree Control

 HTML Checker

 Download Times

 Link Analyser

 List

 Link

 Anchor

 Local Jump

 Image

 Video

 Symbol

 Table

 Frames

 Form

 Meta Information

 Redirection

 Style Sheet

Inline Style

 Marquee


Toolbar Items

Many of the items in the toolbars are similar to ones commonly seen in word processors. This is because most of the toolbar icons are used to apply font formatting effects, which do not require the use of a wizard.

Below is a list of the available toolbar items. Click on the name or related icon of the one you want to see more information about.

 New

 Open

 Save

 Print

 Cut

 Copy

 Paste

 Undo

 Redo

 Find

 Replace

 Spell Check

 Insert Basic Tags

 Date/Time

 Refresh

 Internal Preview

 External Preview

Style List

Font List

Font Size List

 Base Font

 Bold

 Italic

 Underline

 Strike Through

 Typewriter Text

 Superscript

 Subscript

 Font Colour

 Left Align

 Centre

 Right Align

 Justify

 Comment

:-)  Smiley

Document Title

Background Colour


Document Options Wizard

Overview

The Document Options wizard, accessible through the [image] button, or the Options | Document Options menu item, allows you to change the settings which are applied to the entire document. This includes the background for the document, it's title, and colours for different parts of the document.

Details

After loading the wizard, you will see the first page in which you can change the title of the page, the address of the background image and the margins of the page.

Document Title

The title of the page is shown in the title bar of the browser when the page is loaded. For example, if you set the title of the page to "My Home Page", the title of the browser would be something like "My Home Page - Microsoft Internet Explorer". The title should be descriptive, but not too long. The title will probably also be used by most search engines you submit your site to, so if you want to attract traffic from these engines, use a title which will make them come to your site rather than someone else's.

Background Image

If you specify a background image, that image will then be tiled across the background of the page, underneath the text. If you also specify a background colour (see below), the colour will be shown while the background image is downloading. You should not use a very big image file as this will take a long time to download, and you should not use animated GIF files as this will make the text almost impossible to read. Make sure you test the page for readability if you use a background image.

Background Image Settings

You can use the Browse... button to select a file to use as the background image from your hard drive. If you do this, you should also make sure that the Use Relative Filename box is checked, as this should ensure that the image will display on other people's computers when they look at the page. Another setting you can use for the background image is the Fix Background check box. This allows the image to appear static in the background, rather than scrolling with the text as normally happens. You should be aware that this is not supported on all browsers, and can also take up large amounts of processor time compared to scrolling the image.

Document Margins

By default, the page will be shown slightly away from the edges of the browser window. You can change this width by changing the margin settings. The left margin specifies the distance from the left edge of the browser to the start of the page, and this distance is also used as the right margin. You can also set the top margin, and this is also used to set the bottom margin. The margins are filled in with the background colour or image, but the text is kept out of it.

After setting up these options, click on Next to see the second page of the wizard. On this page you can change the colours of different sections of the page. To change any of the colours, click on the colour you want to change and select a different one from the colour selector that appears.

Background Colour

The colour set here is used instead of the background image, set on the first page.

Text Colour

This is the default colour of all text in the document

Links Colours

These three colours are applied to the links in the page. The standard link colour is the colour applied to links which have not yet been visited. The active link colour is used for links which have been clicked on and the target page is still being loaded. The visited link colour is used for links where the target page has already been seen.

Colour preview

This preview shows how the colours will look like on a page together. You can also click on the With Picture button to see how they will look with the background image.

After setting up the colours, click on Next again. On this final page of the wizard, you can specify a sound file to be played in the background while the visitor views the page. You can specify both the file name of the sound to be used, and how many times you want it to be played. You can also preview the sound.

Click on Finish to save the settings and return to the page.


Tree Control Wizard

Overview

The Tree Control wizard, accessible through the [image] button or by selecting the Tree Control item from the New File dialog box, accessed through the File | New... menu item, allows you to build interactive tree controls, similar to the one in Windows Explorer. The tree control is only interactive in Internet Explorer 4 or greater; in other browsers the tree is always expanded and cannot be changed. However, all the items remain accessible.

Details

Root

The root of the tree is the item from which all the other items are accessible. This item is expanded when the page is first loaded, and the items that come directly off this item are then visible. Sub-items from these items are collapsed and so are not visible.

Add Item button

This button adds another item at the same level as the currently selected item. This button is not available when the root is selected as there can only be one root to a tree

Add Child button

This button adds a sub-item to the currently selected item.

Delete button

This button deletes the currently selected item, and all it's children.

Font button

This button shows the Font Wizard, which allows you to select the font which will be used for the text for the items in the tree control.

Colour button

This button shows the colour selector when it is clicked. The selected colour is used as the background colour for the page.

Moving Items

You can move items around the tree from their default position to another by dragging and dropping the items. If the moved item had any children, they are moved with the item and remain it's children.

Renaming Items

You can rename an item by clicking on it once to select the item, and one more time to put the tree into editing mode. Note that these are two separate clicks, not a double-click.

Create HTML button

This button generates the HTML code for the tree control, then displays a save dialog box so that you can save it to a file. The wizard will then close.


HTML Checker

Overview

The HTML Checker, accessible through the [image] button or the Edit | Check HTML... menu item, checks all the HTML tags in the document to find if the tag and the attributes in it are recognised as known HTML tags, and also checks that the tags such as <html>, <head>, <body> etc. are present and in the correct order.

Details

When the HTML Checker is loaded, it immediately starts to check the document. Whenever an error is found, it is added to the list box in the HTML Checker window. When the check is finished, you can select the error and click on Show to show you where in the file the problem is. You can then click on Close to return to Constructor and fix the problems.


Download Times

Overview

The Download Times wizard, accessible through the [image] button or the View | Download Times... menu item, allows you to see how long the document will take to download from the Internet using various connections.

Details

On loading the wizard, all the files required to load the page correctly, including images, sounds and pages in frames defined in the document, are added to the list in the wizard. The total file size is calculated, and the time this size file would take to download given perfect conditions is shown. Note that this is a minimum time; depending on the conditions of the connection, it may well take longer.


Link Analyser

Overview

The Link Analyser, accessible through the [image] button or the View | Link Analyser... menu item, shows you a list of all the links in the document, and indicates whether these links will work or not, i.e. whether the files they refer to are present. It also checks whether a reference to an anchor within the same file points to an anchor which exists.

Details

When the Link Analyser is loaded, it gets the addresses of all the files that are linked to in the document. It then checks whether these files exist or not. If the file exists, then a tick is placed next to the file name. If the file does not exist, a cross is placed there instead. Some files cannot be checked, such as those that are on the Internet, and links to e-mail addresses. These links must be checked manually. To do this, select the link and click on the Check Now button. This will try to connect you to the Internet and load the page specified in the link.


List Wizard

Overview

The List Wizard, accessible through the [image] button or the Insert | List... menu item, allows you to create numbered and bulleted lists.

Details

List Type Selection

On the first page of the wizard, you must select what type of list you want to create - bulleted or numbered. Select the type you want and click on Next.

List Format

On the second page, you can select the style of either the numbers or bullets you want in the list. A sample of the different types is shown, and you simply have to select the type you want. Click on Next to continue.

List Items

On this last page of the wizard, you must type in the items you want to have in the list. Type in each item on a separate line. Any text which was selected in the main editing window will be placed in this box. To create the list and insert it into the current document, click on Finish.


Link Wizard

Overview

The Link Wizard, accessible through the [image] button or the Insert | Link... menu item, allows you to make a section of text or a HTML object such as an image into a link to another page on the Internet.

Details

In the Link Wizard, you must enter various details to create the address of the target of the link. Firstly, you must select the protocol you want to use to get the file. This sets the type of file you will be linking to. See the descriptions below to select which to pick.

1	http is used to get other pages off the world wide web. This is the most common one you will use.

2	mailto is used to send an e-mail to a specified address when the link is clicked.

3	ftp is the most common protocol for retrieving files. The file must be stored on an ftp server which can accept anonymous logins.

4	news is used to open a newsgroup from Usenet.

5	gopher is possibly the least commonly used protocol. It provides a link to gopher-space, which was the forerunner of the world wide web and is now little used.

6	file is used to load a file off the user's own hard disk. If you are going to use this, then you must be sure that the user has the specified file in that location.

After you have selected which protocol you want to use, the names of the other entry boxes will change accordingly, and some may also be disabled as they become inappropriate for the selected protocol. The http protocol uses the most of the available entry boxes, so the example below shows how to create a link using the http protocol.

To create a link to the index page for Constructor on the Internet, http://www.mutantpenguin.net/constructor/index.html, you would enter the following:

?	http in the protocol list

?	www.mutantpenguin.net in the Computer text box

?	constructor in the path box

?	index.html in the filename box

?	[Nothing] in the section box. You could place the name of an anchor in this box,

You can also enter a title for the link. This will normally be displayed as a pop-up message when the viewer places their mouse over the link, although this is up to the browser.

Click on Finish to insert the link. If any text was selected when you loaded the wizard, this text is made into the link. Otherwise, place the text you want to form the link between the <a href="..."> and </a> tags.


Anchor Wizard

Overview

The Anchor Wizard, accessible through the [image] button or the Insert | Anchor... menu item, allows you to name a section of the current page, and that section can then be referred to directly in a link. For example, if you have a very long page, including one section which starts half-way down the page, you may think about placing an anchor at the start of that section. You can then make a link to point at that anchor. When this link is clicked on, the browser will load the page and then scroll down to the anchor.

Details

To create an anchor, move the cursor to the part of the page where you want to create the anchor. Load the wizard, and type in the name you want to give to the anchor. This name must be unique in the file. Click on Finish to create the anchor.


Local Jump Wizard

Overview

The Local Jump Wizard, accessible through the [image] button or the Insert | Local Jump... menu item, allows you to create links to anchors defined in the current file.

Details

After loading the wizard, you will see a drop-down list which contains the names of all the currently defined anchors in the page. You can either select one of these, or type in the name of one which is not yet defined. You should put it in as soon as possible before you forget about it. You can check that all the links will work by using the Link Analyser.


Image Wizard

Overview

The Image Wizard, accessible through the [image] button or the Insert | Image... menu item, allows you to insert image files into your pages. The images must already be saved as separate files which must also be published on the Internet along with the web page. This also means that you cannot copy and paste images into Constructor.

Details

Selecting a file

The first piece of information you must specify after loading the wizard is the file name of the image you want to use in your page. This can be on your hard drive, in which case you can use the Browse... button to select it, or you can give an Internet Address. If you select a file from your hard drive, you should also ensure that the Use Relative Filename box is checked. This should help make sure that the image is still displayed when you upload your page onto the Internet.

Preview

If you have selected a file on your hard drive, a preview of the file should be shown underneath the filename. This is only shown if the file is in the GIF, JPEG, BMP or other standard formats. The image should be in one of these formats to ensure that the browser the page is loaded in can display the file properly. You should note that the preview does not show transparent or animated GIF files as they are shown in the browser - for animated files only the first frame is shown, and for transparent files the transparent areas are shown in the colour that was set as transparent.

Image Maps

You can use image maps with your images, and you can create them using the Image Map Wizard.

Settings

That is all the information that is actually required by the browser to display the image. To use the default settings to display the image, click on Finish to insert the image. However, you may wish to specify some other settings. In this case, select the Use Custom Settings option and click on Next.

You can select values for the following options: height, width, border, title and alignment. To set the value for any of these, select the box to the left of the name of the setting, and then enter a value for the setting to the right of the setting name.

Height & Width

These allow you to stretch the image. If you do not specify a value for these, the browser will show the image in the size it was designed as. You should note that if you set one of these values and not the other, the browser will not keep the image in proportion. These values are set in pixels. Once you have selected an image, these values are both set to the designed height and width of the image. You can set these properties visually by clicking on the Set button next to them. You will then see a window containing the image you have selected, which you can resize. Clicking on the Done button closes this window and updates the settings in the Image Wizard. Using the visual resize window, you can keep the image in proportion by ensuring that the Proportional Resize option is checked. You can change the proportion the image is kept to by altering the number in Aspect Ratio box.

Border

This sets the distance that text or other images are kept from the edge of the image. The border is also set to the colour of links set in the Document Options Wizard if the image is part of a link. This is set in pixels.

Title

The title should be used as a text alternative for the image if the browser has been told not to download images by the user. It is sometimes also shown as a pop-up message when the user places the cursor over the image.

Alignment

This specifies how the image should be aligned in relationship to the text and other images. You can only select an alignment type from the list. A preview of what that alignment type will look like will be shown below the list.

Click on Finish to insert the image.


Image Map Wizard

Overview

An image map is a set of co-ordinates which makes certain areas of an image into a link to other pages or parts of pages. You can load the Image Map Wizard by clicking on the Create Map button in the Image Wizard.

Details

After loading the wizard, the image selected in the Image Wizard will be shown in the main area of the Image Map Wizard. The wizard is only usable if the Image Wizard can load a preview of the image.

If you want to alter an existing image map, select the name of the image map from the list in the toolbar. Otherwise, type in a name for the image map here. By default, it is set to the file name of the image the map is being created for.

To create hotspots on the image, i.e. the areas of the image which will link to other pages when clicked on, you must first select the shape of area you want to create by selecting the appropriate drawing tool from the toolbar. You can choose between either a rectangle, circle (not ellipse), or polygon. You can then use these tools to draw on the hotspots onto the image.

To draw a rectangle or circle, place the mouse cursor in one corner of where you want the shape to start. Click and drag to the opposite corner. A preview of the shape will be shown on the image. Note that the area will not be visible when the file is loaded into a browser. When you release the mouse, a box will pop up into which you should type in the name of the file you want to link to. If your site uses frames, you can also select the name of the frame you want to load the target into.

To draw a polygon, click on each corner of the shape. To stop drawing, click on the first corner. This is outlined with a small box. When you do this, the same box as for the rectangle or circle will be displayed.


Video Wizard

Overview

The Video Wizard, accessible through the [image] button or the Insert | Video... menu item, allows you to insert video files into the page. The video must already exist as a separate file.

Details

The process of inserting a video file is exactly the same as that for an image file, except that you select and preview a video file, and you cannot create image maps.


Symbol Wizard

Overview

The Symbol Wizard, accessible through the [image] button or the Insert | Symbol... menu item, allows you to insert special characters using the HTML character codes to ensure that they show correctly on other computers.

Details

After loading the wizard, select the symbol you want to insert from the list and click on Finish to insert the character code. Alternatively, copy and paste the character you want to insert into the Other Character text box and click on Finish. Please note that this character may be displayed differently on systems which do not support the same character sets as Windows, and also may not work correctly using characters from the extended character set.


Table Wizard

Overview

The Table Wizard, accessible through the [image] button or the Insert | Table... menu item, allows you to create HTML tables. These tables are used extensively in web pages, not only for arranging data in tabular forms but also for arranging text in columns and generally allowing more sophisticated page layout and alignment techniques.

Details

Rows and Columns

After loading the wizard, you will see an editable grid in the wizard which allows you to design the table in a WYSIWYG way. You can resize rows and columns by dragging the edges of the surrounding grey cells. You can reorder the rows and columns by dragging the grey cells themselves to the new position. You can also add and remove rows and columns using the [image], [image], [image] and [image] buttons on the toolbar. Leave the mouse cursor over a button to see a help hint which describes its operation. New rows and columns are added onto the bottom and right sides of the table respectively.

Appearance

You can change the appearance of the table by changing the width of the border around the cells, the margin within the cells, and the background colour of the cells. You can change the border width and margin width by clicking on the [image] and [image] buttons respectively. When you click on one of these buttons, a box pops up underneath the button into which you can enter the new value. You can change the background colour by clicking on the [image] button and selecting a new colour from the choices which pop up, or by clicking on the More Colours... button in the colour list and selecting a colour from the colour selection box which then pops up. Note that the colour of the selected cell will be different, and the cells around the edge remain grey - these cells are only used for resizing and moving the rows and columns and will not be in the final table.

Text

You can enter text into the table at this stage - simply click on the cell you want to type text into and start typing. You could also type the text in after you have inserted the table into the web page - the <td> and </td> tags indicate the start and end of each cell. You can also change the position of the text vertically within the table using the [image], [image] and [image] buttons to respectively place the text at the top, middle or bottom of the cells.

Creating the table

You can now click on Finish to insert the table into your web page. The table will be displayed in the browser at least the same size as the preview in the wizard, although the browser will stretch rows or columns to make sure that all the text or images in the table can be seen. However, you might want the table to take up a certain percentage of the browser window. To do this, check the Use Percentages of Window box in the wizard. This will make the browser resize the table to take up the same percentage of the browser window as the preview in the wizard took up of the wizard. For example, if the preview was 60% as wide as the table wizard, the table would be 60% as wide as the browser window.


Frames Wizard

Overview

Frames allow you to split up the browser window and load a separate page in each section. This lets you have a bar down one side or across the top or bottom of the browser containing links which will be visible even when the user scrolls down the page. You can access the Frame Wizard by clicking on the [image] button or the Insert | Frames... menu item.

Details

<body> tag

To use frames, you must have one page in which the frames are defined, and separate pages which hold the content of each frame. The page which defines the frames should not have the standard <body> tag, as the browser will then display the text in the file as a normal web page rather than as frames. When you load the Frame Wizard, if the page includes the <body> tag you will be prompted to remove it.

Laying out the frames

You create frames in the Frame Wizard by splitting the existing frame either horizontally or vertically to create two new frames using the Split Vertically and Split Horizontally buttons. You can then go on to split these frame further, and you can also change the orientation of the split, so if you have split a frame horizontally and want to change it to a vertical split, you can click on the Change Orientation button.

Setting up information for the frames

Each frame must be given a name, and you also have to define what page is to be loaded initially into that frame. You can do this by selecting a frame and entering a name for the frame, and the name of the file to load into it using the text boxes underneath the frames. You can also define whether the user will be allowed to resize the frame, and whether a scroll bar will be shown if the content is too long to display in one go.

Click on Finish to insert the frame definitions into the file. If a person tries to open the file when their browser does not support frames, a default message will be shown prompting them to upgrade their browser to the latest version of either Netscape Navigator or Internet Explorer. You can change this message by changing the text between the <noframes> and </noframes> tags.


Form Wizard

Overview

Forms are becoming more widely used on the Internet to gather information about the people who visit a site, send e-mails, use online ordering systems and for site navigation. To create a form, you can use the Form Wizard, accessible through the [image] button or the Insert | Form... menu item. However, this will only create the "front-end" for the form - you must also write some code to be run when the user performs various operations. This code can take the form of a CGI script which is run on the web server, or some JavaScript or VBScript code which is run by the browser. To use a CGI script, your web server must support the use of that scripting language, and to use JavaScript or VBScript the browser must support that language. In general, JavaScript is better supported on Internet Explorer than Netscape, and VBScript is only supported on Internet Explorer. You should check with your Internet Provider whether you can run CGI scripts on that server.

Details

Adding controls to a form

After loading the wizard, you will see a list of the available controls you can add to the form down the left of the wizard, and the details you need to put in on the right. Select the type of control you want to add, for example a text box, and enter the details which are needed for that type of control. For more information about a certain control, place the cursor in the data entry box you want more information on and press F1.

After you have entered all the details you need for a control, click on the Add Control button to add it to the end of the form. If all the data is present and correct, the control will be added to the form. Otherwise, you will see an error message. The most common errors are not entering a name for the control, which is required, or entering a name for the control which has already been used by another control.

Using a CGI script

If your form is going to use a CGI script, you must have a Submit button on your form. When the user clicks on this button, the script specified by the filename in the Form Action text box is run with all the information from the other controls passed to it. The method of running the script, either Get or Post, is specific to each script. If you are unsure which to use, contact the person who wrote the script you are using. For a collection of ready-to-use scripts, see Matt's Script Archive (http://www.worldwidemart.com/scripts/).

Using JavaScript or VBScript

If you decide to use one of these languages, you should be aware of the potential difficulties which may arise from using different browsers. You should therefore thoroughly test your page on as many different versions of as many different browsers as you can find. For a detailed look at writing JavaScript, see Microsoft's Web Site (http://msdn.microsoft.com/scripting/jscript/default.htm) or Netscape's tutorial at http://developer.netscape.com/docs/manuals/communicator/jsguide4/index.htm.

If you have decided to use one of these scripting languages, you can add commands to the events for certain controls in the wizard under the Action text box.

Click on Finish to insert the form into your web page.


Meta Wizard

Overview

Meta information is used to give other sites information about the web page. The most common use is to get a list of keywords and a description of the page for a search engine such as Altavista. Each piece of information is placed in a separate tag, and the name of the information is kept separate from the information itself. You can edit meta information using the Meta Wizard, accessible through the [image] button or the Insert | Meta Information... menu item.

Details

In the Meta Wizard, there is a drop-down list box named Subject. This list contains the name of each piece of meta information defined in the page. You can simply select the piece of information you want to change, and type in what you want to change it to in the text box underneath. By default four subjects for meta information have already been defined. Generator is inserted by Constructor whenever you save the file to tell software that the file has been written using Constructor. Author is set to your name when you save the file. Keywords is a list of keywords relating to the content of your page, separated by commas and spaces. Description is a short, single-line description of your page which will be displayed next to a link to your page if the keywords matches what the user of a search engine typed in.

As well as changing the values of the existing meta information, you can also create new subjects to store information under. Click on the New Subject button. The cursor will then be placed in the Subject drop-down list box. Type in the name of the subject of the information. Click in the Value text box and type in what information you want to store under that subject.


Redirection Wizard

Overview

You may have seen some pages which automatically loaded another page after a certain amount of time. This can be done in Constructor by using the Redirection Wizard, accessed through the [image] button or the Insert | Redirection... menu item.

Details

When you load the wizard, if you have already specified this information in your page that information will be shown in the wizard. Type in the name of the file you want to be loaded, and the time which should elapse between the user loading this page and the browser loading the next page. If you have changed the location of some pages, you should put a notice on your page asking people to update their links and bookmarks, so you should not use a very short time delay as people will have to read the notice.

You should also put a link to the page you are redirecting to, as some browsers may not recognise the command to load the other page, and so the user would be left looking at a page telling them that another page will be loading in 10 seconds and nothing will happen.


Style Sheet Wizard

Overview

Style sheets enable you to keep a number of style definitions in a separate file which can then be linked into a number of other pages. This stops you having to recreate the styles in a number of pages. You can create and edit style sheets using the Style Sheet Wizard, accessible through the [image] button or the Insert | Style Sheet... menu item. See also Inline Style Wizard.

Details

In the Style Sheet Wizard, there are two "tree" structures. The one on the left contains the names of all the available tags which you can apply styles to, and the one on the right contains the details of all the attributes which you can apply to the tags. To apply an attribute to a tag, simply drag and drop the attribute onto the tag. You can then change the value of the attribute by selecting the attribute which has been added to the tag and changing it's value with one of the controls on the right of the wizard. For example, if you are changing the value of an attribute which refers to a colour, you can change the value using the colour selection button. If the attribute can be one of a certain list of values, you can select from the drop-down list box.

You may want to create a custom style, rather than applying attributes to existing tags. To do this, right-click on the tree containing the tag names and select New Element. You can then name your style. You should start the name with a period (dot) to make it usable as a style to apply to text. You can also create new attributes by selecting New Property. You can then name the attribute to whatever you want. You can also delete properties from a style definition by right-clicking on the attribute and selecting Delete Property.

After you have set up the style sheet, click on Finish. You will be prompted to save the style sheet. Save the style sheet and the tag linking the style sheet file into the web page will be placed. Note that if you now open the style sheet wizard again, it will automatically load the original style sheet again.

You can use any custom styles defined in the style sheet by selecting the name of the style from the style drop-down list on the formatting toolbar. The style will then be applied to the selected text. The name in the drop-down list will be the same as the name you entered in the style sheet wizard without the preceding dot. Any styles you define without a dot being the first character will not be visible in this list.


Inline Style Wizard

Overview

Inline styles are styles made up from a combination of formatting details which can be applied together much more easily than by applying each individually, especially when you would otherwise have to apply each effect separately to many sections of text. An example of this would be if you created your own heading style, with a certain font name, size, colour, bold, italic and so on. If you use a style, you can also change the style of each heading in one go. You can create inline styles using the Style Wizard, accessible through the Format | Style | Edit... menu item. See also Style Sheet Wizard.

Details

After loading the wizard, the first thing you should do is type in the name for the style. If you want to apply the formatting to an existing tag, such as H1 to alter the Heading 1 style, simply type in the name of the tag. If you want to create your own, the name must start with a period (dot).

The first page of the wizard contains options for setting the font style, including font name, size, colour and formatting. When you have set this up, click on Next to go to the second page.

The second page of the wizard allows you to specify layout options for the style, such as text alignment and line spacing. You can also specify whether all the text in the style will be displayed as capitals, small caps, lower case or normal.

After you have set up the style, click on Finish to insert it into the page.

You can also edit existing styles using the wizard. Simply select the name of the style from the drop-down list where you typed in the name originally. All the details for the style will then be loaded into the wizard. You can then set up the style again in the normal way. You should be aware, however, that if the style definition contained settings which are not represented in the wizard these settings will be lost when you click on Finish.

To use a style after you have defined it, select the text you want to apply the style to and select it's name from the style drop-down list on the formatting toolbar. The name is only displayed if you created the style so it is a separate style, rather than customising an existing tag, such as H1. In this case, the formatting is applied automatically whenever that tag is used.


Marquee Wizard

Overview

A marquee, or scrolling, effect can be applied to any section of text, including links and different formatting. This is achieved without the use of Java or any other programming language. The drawback is that currently Microsoft Internet Explorer is the only browser which supports the tag. If the page is viewed on another browser the text is still visible but it does not scroll. To apply the Marquee effect, open the Marquee wizard using the [image] button or the Insert | Marquee... menu item.

Details

Selecting text to scroll

Select the text you want to scroll, then open the Marquee Wizard. The selected text is shown at the top of the wizard. If you want to change it, you can do so at this point.

Scrolling direction

You can select that the text should scroll either horizontally or vertically with the option buttons. You can then select which direction to scroll in that plane. If you have selected to scroll horizontally, you can set the text to scroll either left to right, right to left, or alternating where the text scrolls to one end then changes direction and starts coming back again.

Scrolling options

You can select how fast the text should scroll. This is set in pixels per second. This is only approximate and will depend on the speed of the computer, how much text is being scrolled, and many other factors. However, it can be used to set whether the text scrolls slowly, fast or medium. You can also set how many times the text scrolls before stopping. To keep the text scrolling, set this to -1.

Margins

The scrolling text is placed in a box which is put in the page in the same way as a picture. You can set the margin within this box which the scrolling text disappears and reappears at. This is set in pixels. The left margin is also used to set the right margin, and the top margin is used to set the bottom margin.

Click on Next to go to the next page of the wizard. You must enter some text to scroll before you can click on this button.

Colour

The box in which the text scrolls has a background colour as set by this control. Normally, you will want this to blend into the background of the page, so set this to the background colour of the page.

Height and Width

The dimensions of the box, and so the distance the text will scroll, is set using these controls. They are set in pixels.

Alignment

The box in which the text scrolls can be moved around the page using the alignment setting in the same way as images.

Click on Finish to apply the effect.


Creates a new HTML document using the standard template


Opens an existing HTML file from disk


Saves the current file to disk


Creates a new HTML document using the standard template Opens an existing HTML file from disk Saves the current file to disk Pri
Prints the HTML source code for the page. NOTE Does not print the preview


Removes the selected text and places it on the clipboard


Places a copy of the selected text on the clipboard


Replaces the selected text with the contents of the clipboard


Undoes the last action. Can undo up to 10 actions


Redoes the action which was last undone. Can redo up to 10 actions


Finds a section of text in the page


Replaces a section of text with another


Checks the current document for spelling mistakes


Inserts all the tags which are required by a web page if they are missing


Inserts either the current date and time or a script to show the date and time the document was last saved


Updates the syntax highlighting if it gets out of synch with the actual text


Updates the internal preview if it is available (Internet Explorer 4 required)


Launches the external browser to show a browser preview (Any browser required)


Includes the names of all the styles defined for the document, and some standard ones
Includes the names of all the styles defined for the document, and some standard ones. Select one to apply that style to the selection


Includes the names of all the fonts on your system, and some standard ones. Select one to apply that font to the selection


Includes all the available logical font sizes (1=small, 7=big). Select one to apply that size font to the selection


Shows the font wizard to set the standard font for the document


Places the selected text in bold


Places the selected text in italics


Underlines the selected text


Strikes through the selected text


Places the selected text in a typewriter text style


Places the selection in superscript


Places the selection in subscript


Sets the colour of the selected text


Left aligns the selected paragraph


Centres the selected paragraph


Right aligns the selected paragraph


Justifies the selected paragraph


Makes the selection into a comment (Comments are ignored by the browser)


Insert a smiley. Used to indicate emotions about a comment in a page


Change the title which is displayed in the title bar of the browser when the page is loaded. See also the Document Options Wizar
Change the title which is displayed in the title bar of the browser when the page is loaded. See also the Document Options Wizard


Change the background colour of the page. See also the Document Options Wizard


Relative Filenames

There are two types of filename - absolute and relative. You are probably most used to the absolute form. These are the filenames where the complete file name is given, starting with the drive letter, e.g. C:\Windows\Notepad.exe. However, the other form can also be very useful. This is where the name of one file is given relative to that of the calling file. For example, if you want to give the address of the file C:\Program Files\Constructor\Constructor Help.hlp relative to the file C:\Program Files\Readme.txt, you could use Constructor\Constructor Help.hlp. This is because the Constructor Help.hlp file is in the Constructor sub-directory from the directory where the calling file, readme.txt, is saved.

In general, it is best to use relative file names when you are writing web pages which you are later going to publish on the Internet. This is because, if you use absolute file names, you will end up with pointers to files which are on your hard drive. If these are going to work, the file must be in the same place on the viewer's hard drive as well. However, if you used relative file names, the file name would work both on your hard drive and on the Internet.


Compatibility Issues

Currently there are two main browsers available on the web which are competing for market dominance - Netscape Navigator and Microsoft Internet Explorer. In order to make their browser more appealing, each company has added on extra features which are not supported in the other. This leaves the web developer with a problem - do you utilise the new features in your web page and cut out the people using the other browser, or do you resist the temptation of the new gizmo's and go for generally compatible HTML code? You should normally aim to make your pages as compatible as possible, and only use the newer features where you really need to. You can check how compatible your pages are simply by loading them in the different browsers. You should at least test them on Navigator and Internet Explorer, and this should not be a problem as they are both freely available to download (http://www.netscape.com and http://www.microsoft.com) and quite happily work together on the same computer (at least they do on mine!)

The same is true of JavaScript as well as HTML. Internet Explorer generally supports more of the functionality of JavaScript, so you should make sure that your scripts work on Navigator.


Add-in Programs

Constructor comes complete with several separate programs for editing different types of file which go together to make a complete web site. Along with the main Constructor HTML Editor for writing the web pages themselves, you should also have:

•	Constructor CSS for editing style sheets

•	Constructor CDF for creating Active Channels for Internet Explorer 4

•	Template Constructor for editing templates for use with Constructor HTML Editor

You should also get a decent graphics program for creating any images you want to use in your site. You should seriously consider investing in Jasc's Paint Shop Pro, available as shareware from http://www.jasc.com.


License Information for VSpeller Not Found

Constructor uses an ActiveX control, VSpeller, to provide the spell checking feature. On some systems, another program has already installed an earlier version of this control and the installation program may not automatically overwrite the old version with the newer one. To solve this, go to http://www.mutantpenguin.net/ and follow the links to the VSpell fix for Constructor. Download the fix and unzip the files to your Windows\System folder. Constructor should now run without any problems.


Uninstalling Constructor

You can uninstall Constructor using the Add/Remove Programs part of Control Panel. Click on Start | Settings | Control Panel to bring up Control Panel, and double-click on the Add/Remove Programs entry. In this window there is a list of programs you have installed. Select Constructor and click on Add/Remove. You will be prompted to confirm that you want to remove Constructor. Click on Yes and Constructor will be uninstalled.


Importing Files

Overview

Constructor provides a number of ways to import different types of file. You can import other HTML files, preformatted text files, and convert a text file to HTML. You can access these features through the File | Import HTML File..., File | Import Text File... and File | Convert Text File to HTML... respectively.

Details

Importing HTML Files

You can import another HTML file using the Import HTML File Wizard, accessible through the File | Import HTML File... menu item. When you click on this menu item, you will be prompted for the name of the file you want to import. You will then be shown the Import HTML File Wizard. In this wizard you can choose whether you want to import information from the <head> section of the file, and if so, which pieces of information you want to import. You can also select whether the text in the <body> section is placed at the end of the current file or at the current cursor location.

Importing Preformatted Text Files

Generally in HTML, if you insert a line return by pressing [Enter] this is not shown when the browser loads the file. Instead, you have to enter a <br> tag. If you have a lot of text in a standard text file which is laid out the way you want others to see it on the web, you can insert it as a preformatted text file. This makes the browser show all the text as a standard text editor would, and all tags are shown as the tag, rather than interpreted and the effect represented by the tag shown. This has the downside that you cannot apply any formatting to a preformatted text file, but it does mean that you do not have to worry about making the text appear in the browser the same way it did in your text editor, such as Notepad. You can insert a preformatted text file using the File | Insert Text File... menu item. You will be asked for the name of the file to import, and the text from the file will then be placed at the current cursor location.

Converted text files to HTML

There may be a case where you already have all the text for a document in a text file, but you then want to apply formatting to it using HTML. You cannot then import it as a preformatted text file as above as any tags would then be displayed as the text for the tag, rather than the effect for the tag being displayed. Instead, you can use the Convert to HTML feature of Constructor. This simply adds in all the standard HTML tags, such as <html>, <head> and <body>, and adds line break tags at the end of each line. You can then either save this file or copy and paste sections from it into other HTML files.


Site Management

Overview

The site management feature allows you to use a single file to keep track of all the web pages, images, style sheets and FTP servers which together make up your site. It can then be used to create links between pages, insert images and style sheets, upload the files to your FTP server and open and preview files.

Details

The site management tree is the explorer-like structure on the left of the HTML editing area of the main window. This is split into four folders - Pages to contain all the HTML files in your site, Images to contain all the graphic files, Style Sheets to contain the list of style sheets used, and FTP Sites to hold the details of the servers which you upload your pages to.

Creating the Site Management File

Before you can use the site management feature, you must create a site management file to hold the details of all the files. You can do this by clicking on the [image] button directly above the site management tree. You will be prompted to save the file. Save it in the same folder as the files in your site. If you have split your site into many folders, save it in the folder from which all the other folders are sub-folders. For example, if you have saved your site in C:\Website\Pages and C:\Website\Images, save the site file in C:\Website.

Adding Pages

Now you have your site management file, you need to add the pages in your site to it. You can do this by clicking on the [image] button. Select the file you want to add and click on OK to add it. The file will be placed in the Pages folder in the site management tree. It is important that you realise that any operations on the file in the site management tree does not have any effect on the file itself. For example, if you delete the file from the site management tree, this does not delete the file itself.

Adding Images and Style Sheets

As well as adding web pages, you can also add images and style sheets to the site management tree. You can do this by clicking on the [image] button and selecting the file you want to add. This will be placed in the appropriate folder, either Images or Style Sheets.

Organising Files

If you get a lot of files in the site management tree, you may find it difficult finding the one you want. At this stage you can organise the files using folders, in the same way as Windows Explorer. Use the [image] button to add a folder to the current folder. You can then move files into it by dragging and dropping them onto it.

Removing Pages

To remove a page you have added to a site, select the file in the tree and click on the [image] button. Remember that this does not delete the file itself; only the reference to it in the site management file.

Creating Links

You can easily create links between files in a site by opening the file you want the link in, selecting the text you want to be the link, and dragging the target page onto the text. The selected text is then made into a link to the dropped file. Note that the file into which the link is being inserted must be saved before the link is created as the link uses the relative file name.

Inserting Images

To insert an image from a site into a page which is already saved, place the cursor where you want to insert the image and drag and drop the image file onto the text. The image tag will be inserted at the cursor location.

Using Style Sheets

To use a style sheet in a site, drag and drop the style sheet file from the site management tree onto the currently open file. The style sheet tag will be inserted in the correct place.

Uploading files from the site

To publish your site, you need to upload the files in it to a server using the FTP Wizard. You can do this by double-clicking on the New FTP Profile icon within the FTP Sites folder in the site management tree. This will load the FTP Wizard into which you first need to enter the details of the server you are uploading to. These details should be available from the people who run your server. You should set the Path setting to the location on the server where you want any files in the same folder as the site file to be uploaded to. Files in sub-folders will be placed in the same sub-folder on the server. For example, if your site file is saved in C:\Website, and you set the Path setting to MySite, files in C:\Webiste will be uploaded to the Mysite directory on the server, and files in C:\Website\Pages will be uploaded to the Mysite/Pages directory on the server. Click on Next after inserting these details. The two lists on this section of the wizard contain all the files in the current site, and those which you have selected to upload. To set a file to be uploaded, double-click on it. To remove a file from the list to be uploaded, double-click on it again. Click on Finish when you have selected all the files you want. The wizard will then attempt to connect to the server you specified and upload the files. Any feedback from the server and commands sent to it are shown, and when the upload is complete you will have the option of saving this as a log file. You can also save the settings for the server to your site file so you will not have to type them in every time you want to upload the files. The settings are represented in the site management tree as the name of the server in the FTP Sites folder. Double-click on the server to load the FTP Wizard along with the details for that server.

Opening files

You can open a file in your site management tree by double-clicking on it. In the case of web pages, the file will be opened in Constructor, as will style sheets. Images will be opened in the image editor, set up in the settings wizard. You can also preview web pages by selecting the file and clicking on the [image] button.


Creates a new site management file


Opens an existing site management file


Save the current site management file to disk


Add a web page to the current site file, into the selected folder if possible


Add an image or style sheet to the current site file


Create a new sub-folder in the selected folder


Add a reference to the currently open HTML file to the site management file


Delete the reference to the selected file in the site management tree


Open the selected file in the application specified in the settings wizard


FTP (File Transfer Protocol) Wizard

Overview

To allow other people on the Internet to view your web pages, you must publish them by uploading the pages and associated images and style sheets to a suitable server. This is normally done using FTP, and there is a wizard built in to Constructor to use this to transfer files from your computer to a server. You must first have the required details of the server you are uploading to.

Details

If you are uploading files which are part of a site file, open that site management file and see the information in the Site Management topic. Otherwise, follow the instructions below to upload single HTML files.

Click on the File | Upload... menu item to load the FTP Wizard. On the first page of this wizard, you must enter the details of the server you are uploading to. This includes the name of the server, and your username and password which will allow you access to write files to the server. You must also enter the directory (folder) which you want to upload the file to. If this folder does not exist, it will be created.

Once you have entered the server details, click on Finish. This will then attempt to connect to the Internet and the server you have specified. Once you are connected, you will see the feedback from the server which shows you what commands are being sent to and from the server. You can save this to a text file to read later in case you find any problems with the web page once it has been uploaded.

If you are connected to the Internet through a modem dial-up connection, you may like to connect to the Internet before using the FTP wizard. This is because the attempts to connect to the server will "timeout" after 60 seconds, and this may not be long enough if this time has to include the time taken to dial into and connect to your Internet Service Provider.


The name of the server you want to upload the page to


The port used to connect to the server. Most servers accept connections using port 21


The directory (folder) you want to upload the page to on the server


The name of the user account being used to connect to the server with


The password which accompanies the user name


The files in the site which have not yet been set to upload. Double-click to move to "Files to upload" list


Files which have been set to upload. Double-click to move to "Available Files" list


List of commands sent to and from the server to upload the file(s). You can save this for inspection at a later date


HTTP Wizard

Overview

You can open files directly off the web by downloading them straight to Constructor using the HTTP Wizard, accessible through the File | Open from Web... menu item.

Details

When you open the HTTP Wizard, you must type in the entire URL of the page you want to open from the web. Click on Open to connect to the Internet and Constructor will start downloading the file. Once the file has been downloaded, it will be opened in Constructor in the same way as any other file, except that you cannot save the file straight to the web again. You must do this by using the FTP Wizard. Information about the progress of the transfer can be seen at the bottom of the wizard.


The full name of the file, including the http:// part, of the file you want to open


Information about the progress of the transfer of the file


Name of the image file to be tiled across the background of the page


Forces the background image to remain still in the background, rather than scrolling


Width of the horizontal and vertical margins between the browser window and the page, in pixels


Colour of background, standard text and images


Name of the sound file to play in the background


Number of times to play background sound file


Description of the HTML errors found in the document


Highlights the section in the file the selected error refers to


Common Code

Overview

You may find yourself repeating the same section of HTML code several times throughout a page or site. To save having to type this code in each time, you can use the Common Code wizard. This involves creating a file which specifies what text to insert both before and after the selected text, so this allows you to specify both opening and closing tags.

Details

Creating a common code sample

To create a common code sample, go to the Common Code Reuse tab in the main window, right-click and select Add Code Section.... This will display the Common Code Wizard, into which you can enter the starting and ending tags. Click on Finish. This sample is then saved as a new file. You can rename this file in the common code reuse tab as you would in My Computer or Windows Explorer.

Using a common code sample

After you have create the sample, you now need to use it. Select the text you want to place the tags around and double-click on the code sample in the Common Code Reuse tab. If you have not specified either the opening or closing tags, the other tags are inserted as normal at either the beginning or end of the selection.


The text which will be placed in front of the selected text when the sample is applied


The text which will be placed at the end of the selected text when the sample is applied


Font Wizard

Overview

The font settings can be made up from various tags to apply different effects. The font wizard allows you to apply any or all of these effects at the same time. You can use the wizard in much the same way as you would use the font settings in most word processors, except that the preview of the font may not be absolutely precise due to the way that each browser displays fonts depending on the user's settings.

Details

If you do not give a setting for any of the following, the text will appear in the same font as the preceding text. To do this, simply leave that section blank.

.

Font Selection

You can either type in the name of the font you want to use, or select one from the list. As well as displaying all the fonts installed on your system, the list also includes the names of some standard fonts which are available on all machines, depending on which browser is being used. You should also remember that the computer which the page is being viewed on may not have the same fonts installed as your computer.

Font Style

The font style includes different combinations of bold and italic effects. Select an item from the list to apply either or both of these effects.

Font Size

The size of the font is set differently in HTML than in word processors. In word processors, the size is set in points, each point being equivalent to 1/72 of an inch. In HTML, the available sizes are from 1 to 7. This allows each browser to be able to interpret the meaning of each size slightly differently, and also users can often set the browser to use large or small fonts. This setting changes the browser's interpretation of each size, and so you cannot be absolutely sure how big the text will look in each size. However, the size of the text will increase from size 1 to size 7.

Other effects

All the other font effects can be set to either on or off by checking or unchecking the tick boxes. You can see the effect this will have in the preview. Most of these effects should already be known to you.


Changes the font to be used for the text


Changes the bold and italic settings for the text


Changes the size of the font


The name of the control which can be used in JavaScript and is sent to any external scripts in the form ID=Value


The text to be displayed on or in the control


The JavaScript to be executed when the control is clicked


The scripting language the action is written in


Specifies whether the user can change the value of the control


The maximum number of characters which can be stored in the text


The width of the control in characters, i.e. the number of characters which are visible at once


The details of the items in the control, with each item on a separate line


The height of the control in characters, i.e. the number of lines of text which are visible at once


Sets whether the control is checked (ticked) when the form is opened


Adds the control for which the details are currently visible to the form


Allows you to see and edit the HTML code for the form before you enter it into the page


Splits the selected frame into two separate frames, with the dividing line being horizontal


Splits the selected frame into two separate frames, with the dividing line being vertical


Changes the orientation of the dividing line between the frames, i.e. from horizontal to vertical or vertical to horizontal


The name of the selected frame. This is used to create links which load pages in a different frame


The web page to initially load in the frame


Sets whether the user will be allowed to change the size of the frame


Sets whether the frame will have scroll bars if the file loaded in it is too big to show without them


The name of the image file to show


The name of the image map to use with the image


Stretches the image to this height, specified in pixels


Stretches the image to this width, specified in pixels


Keeps any surrounding text or images this number of pixels away


Text to use in place of the image when images are not being shown


Specifies how to position the image on the page. See the preview underneath to see how the alignment will work


Specifies whether to import any information other than the body text


Imports meta information


Imports inline styles


Uses the imported files style sheet
Uses the imported file's style sheet


Uses the imported file's title


Uses the settings in the imported file's <body> tag


If settings being imported are already specified in the current document, the settings in the current document will be overwritt
If settings being imported are already specified in the current document, the settings in the current document will be overwritten


Sets whether to place the imported text at the cursor position or at the end of the current text


Sets the name of the anchor to insert. Drop down list contains the names of existing anchors
Sets the name of the anchor to insert.


The protocol defines the type of resource you are linking to. For a more detailed description of each protocol, see the help top
The protocol defines the type of resource you are linking to. For a more detailed description of each protocol, see the help topic about the link wizard.


Depending on the protocol, this sets the name of the server the file you are linking to is on, or the e-mail address you want th
Depending on the protocol, this sets the name of the server the file you are linking to is on, or the e-mail address you want the link to send e-mail to.


The name of the folder the file you are linking to is in
The name of the folder the file you are linking to is in.


The name of the file you are linking to.


The name of the anchor in the target file you want to link to.


The name of the frame you want to load the target file in to.


A textual description of the link


Specifies whether to create a numbered or bulleted list


Sets the style of bullets or numbers you want to use


The text you want for each item in the list. Put each item on a new line


The name you want to give to the map. Names must be unique.


The text you want to scroll
The text you want to scroll.


Sets whether to scroll the text horizontally or vertically
Sets whether to scroll the text horizontally or vertically.


Sets the speed of the scrolling, in pixels.


The number of times the text should scroll before stopping. To keep scrolling continuously, use -1.


The horizontal and vertical margins around the scrolling text area, in pixels.


The background colour of the area in which the text scrolls.


The dimensions of the scrolling area, in pixels.


The name of the topic about which the information is begin held.


The information to be held under the subject heading.


The name of the file to automatically load.


The number of seconds to wait after loading the current page before loading the next page.


The name to give the new anchor.
The name of the anchor to jump to.


Constructor Options

Overview

Many aspects of the user interface and the functionality of Constructor can be customised, and this can be achieved using the Options Wizard, accessible through the View | Options... menu item.

Details

Syntax highlighting

As the highlighting of the syntax of a page is used by several other functions to differentiate between tags and text, it is not recommended that you turn it off. However, it is possible to disable this feature if you find that it is slowing your computer down too much. You can disable syntax highlighting by unchecking the "Use Syntax Highlighting" check box. You can also change the colours used for the various parts of the syntax. To do this, select the part you want to change the colour of, either by selecting it's name from the list of by clicking on it in the preview. You can then click on the coloured button and select a new colour from the colour picker which appears.

Default template

The default template is the text which is automatically placed in all new files. You can change this in the Default Template tab. If you want all new files to look like the one you are currently editing, click on the Use Current button and the text from the current file will be placed into the default template.

Editor font

You may find the default font used for editing files hard to read. You can change which font is used by clicking on the Font... button in the Editor tab. Change the properties of the font you don't like, and click on OK. You can also change whether any tags inserted by Constructor should be in upper or lower case, and whether colour settings should be in hexadecimal or in colour names, where appropriate.

Advanced editor options

If you type a lot of tags in yourself and you don't like the interruption of the tag prompting feature, then you can turn it off by unchecking the "Use Tag Prompting" check box. You can also select whether bold and italic effects should be applied using <b> and <i> or <strong> and <em> tags. This is set using the "Use Logical Fonts" check box. If this is left unchecked, <b> and <i> tags are used.

When Return is pressed

When you press Return in Constructor, by default a <br> tag is inserted so that the line break is also shown when you load the page in a browser. You can set this to be a <p> tag to insert a paragraph break, or you can turn this feature off by selecting None from the three option buttons on the OnReturn tab. You can also set the internal preview, where it is being used, to update every time you press Return. This can be very useful as you can see quickly a recent preview of the page, although on some systems this may slow your computer down too much so you want to turn it off. You can do this by unchecking the "Update preview" check box.


Enables/disables colour coding of HTML syntax


Select an item to change the colour of, and then change the colour using the colour button above
Select an item to change the colour of, and then change the colour using the colour button above.


Changes the text which appears in each new document by default. Click on Use Current to place the contents of the current docume
Changes the text which appears in each new document by default. Click on Use Current to place the contents of the current document into the template.


Sets the font used to display HTML files in.


Sets whether to insert tags in UPPER or lower case. Only applies to tags created by Constructor.


Sets whether to insert colours in hexadecimal codes or colour names. Where a colour name is not defined for the colour selected,
Sets whether to insert colours in hexadecimal codes or colour names. Where a colour name is not defined for the colour selected, the hex code will be used instead.


Enables/disables tag prompting (pop-up lists of available tags, properties etc.).


Sets whether to use <b> and <i> tags for bold and italic (off) or <strong> and <em> (on).


Specifies the programs used to preview web pages and image files in the site management tree.


Sets which tag, if any, to insert when you press Return in a document.


Sets whether to update the internal preview, where available, when you press Return.


Sets whether to create the table so as to resize heights and widths of cells to occupy the same percentage of the browser window
Sets whether to create the table so as to resize heights and widths of cells to occupy the same percentage of the browser window as they do of the wizard window.


Adds an item at the end of the list which the selected item is a part of.


Adds an item at the end of the list which the selected item is the parent of, i.e. creates a sub-item off the selected item.


Deletes the selected item and any children.


Sets the font for the text of the items in the tree.


Creates the HTML code for the tree control and saves it to disk.


A pixel is one dot on the screen. A pixel is the smallest thing you can see on the monitor. You can set the size of these pixels
A pixel is one dot on the screen. A pixel is the smallest thing you can see on the monitor. You can set the size of these pixels by setting the resolution of your screen. Common resolutions are 640x480, 800x600 and 1024x768 pixels.


Templates

Overview

Templates allow you to create a single file which can then be used by Constructor to create other pages in a common format. The template is written in Template Constructor and is then loaded into Constructor using the File | New from Template... menu item.

Details

The basic HTML and text which is constant in all the pages created using the template should first be created in Constructor. This text can then be copied and pasted into Template Constructor. You can launch Template Constructor using the Tools menu in Constructor.

0	After creating the basics of the document, you can now add command codes to the template. These codes will force the user to type in certain pieces of text into pop-up dialog boxes when that section of the document is opened. These command codes can ask for single lines of text, multiple lines of text, create loops so the other commands are run either a specified number of times or until the user says stop, launch wizards in Constructor to create tags, prompt for formatting options, or launch a plugin. Details of the command codes can be seen below.

1	{#prompt:variable-name}

This code displays a one-line text entry box into which the user can enter text to replace the code. variable-name is then assigned that value for later use.

{#promptmulti:variable-name}

Behaves in the same way as prompt, but this time uses a multi-line text entry box. Each line of text is automatically ended with a <br> tag.

{#formatting:variable-name}

Displays the Font Wizard so that the user can select a formatting effect for the subsequent text.

{createtag:tag-name}

Loads the wizard for the appropriate tag as specified in the tag-name parameter. Possible values for tag-name are:

•	anchor

•	font

•	form

•	frame

•	images

•	jump

•	link

•	list

•	marquee

•	meta

•	redirect

•	style

•	stylesheet

•	symbol

•	table

•	video

{#loop:variable-name/iterations} ... {#endloop:variable-name}

Defines the start and end of a loop. Once Constructor encounters a loop command, it processes the information between the loop command and it's corresponding endloop command, according to the value of iterations. If this is a valid integer, the intervening text is repeated that many times. If it is "prompt", then the user is asked each time before entering the loop whether they want to continue for another iteration. If they answer Yes, the code is repeated. If they answer No, then they are moved on to the endloop command.

{#plugin:filename}

Executes a plugin with the given file name. The file name does not include the path part as all the plugin files must be in the same folder.

{#define:type/variable-name/value}

Assigns value to variable-name, where variable-name is a variable of type. If variable-name is used again later in the template, provided that they two instances are of the same type then the second and later instances will be automatically replaced with value without prompting the user. Possible values for type are:

•	prompt

•	promptmulti

•	formatting

Notes

Variable names are case sensitive. If you have two commands, {#prompt:e-mail} and {#prompt:e-mail}, when the user is prompted for a value for e-mail from the first command that value is stored and when Constructor then reads the second command, it will automatically be replaced by the value assigned to the first command. However, if the two commands were {#prompt:e-mail} and {#prompt:E-mail}, then the user would be asked for values of both e-mail and E-mail.

Variables assigned to in a loop loose their value at the end of the loop. Although variables retain their values between commands, if a variable is assigned a value in a loop then that value is lost for subsequent iterations and when the loop ends. This enables you to perform functions such as:

{#loop:paragraph/2}
<b>{#prompt:Paragraph Heading}</b>

{#promptmulti:Paragraph Text}
{#endloop:paragraph}

In this example, the commands {#prompt:Paragraph Heading} and {#promptmulti:Paragraph Text} are repeated twice, but each time they are encountered the user is asked again for their value, as the values which were assigned to them on the first iteration are lost when the loop is repeated. If this was not the case, the first and second paragraphs which the code would create would be identical and therefore useless.

Loops cannot overlap. While loops can be nested (you can have one loop inside another), loops must be ended in the opposite order to that in which they were created. For example:

{#loop:loop1/2}
Place some text here
{#loop:loop2/2}
Some text here too
{#endloop:loop1} <-- Error here: loop1 closes before loop2 when loop2 started within loop1
{#endloop:loop2}

This code should look like:
{#loop:loop1/2}
Place some text here
{#loop:loop2/2}
Some text here too
{#endloop:loop2}
{#endloop:loop1}

Constructor's behaviour on encountering loops which overlap is undefined.

All of these command codes can be entered in Template Constructor using the [image] toolbar button. Click on the down-arrow part of the button and select the type of command you want to enter. You may then see a wizard asking you for more information before entering the code. You can also either type the command in yourself or click on the main part of the button to insert the last code again.

After entering the command codes, you should click on the [image] button. This will check the codes in the template and show you any errors that are found. If no errors are found, you can then use this template in Constructor. Click on the File | New from Template... menu item and select the template file. You will then see the pop-up boxes displayed as a result of the command codes.

An example template is in the Examples folder.


Plugins

Overview

A plugin can increase the functionality of Constructor by providing extra wizards which are accessible through the Tools menu. A plugin is a dll supplied by another company, generally to produce a specific effect. To install a plugin, either follow the instructions given to you by the author, or simply copy the dll to the Addin folder in the Constructor folder. The following details are useful if you want to write your own plugin. If you do write a plugin, let me know by e-mail (constructor@mutantpenguin.net) and I will put a link to your site from The Mutant Penguin Network.

Details

Each plugin must include and export two functions: GetInfo and Execute. GetInfo is used by Constructor when the program starts to get the information about the plugin which is placed in the text of the menu item used to represent it. Execute is called when the user clicks on that menu item.

GetInfo

The GetInfo function is called when Constructor starts to get information about each plugin. If this function fails, the plugin is not shown in the list in the Tools menu.

GetInfo is defined as the following:

void __stdcall GetInfo(

char ** GetName,

char ** GetDescription,

int * GetMajorVerNo,

int * GetMinorVerNo

)

Parameters:

GetName

Points to a string to hold the name of the plugin

GetDescription

Points to a string to hold the description of the plugin. This is shown as a help hint in the status bar of Constructor

GetMajorVerNo

Points to an integer to hold the major version number of the plugin. For example, for version 1.0 of the plugin, this would point to 1

GetMinorVerNo

Points to an integer to hold the minor version number of the plugin. For version 1.0, this would point to 0.

Return Value

This function does not return a value.

Execute

The Execute function is called when the plugin is run by clicking on it's menu item in the Tools menu in Constructor.

Execute is defined as the following:

RETVAL __stdcall Execute(

char * Text,

char * Selected,

)

Parameters:

Text

Contains all the text in the current document in Constructor

Selected

Contains the selected text in the current document

Return Value

The function returns a RETVAL structure. This is defined as shown below.

typedef struct RETVAL {

char* Text;

bool Selected;

} RETVAL;

Members:

Text

Holds the text with which Constructor will replace either the current selection of the entire document.

Selected

Specifies whether only the selection is to be replaced with Text, or the entire document. If Selected is true, only the selection is replaced.

An example plugin written in Borland C++Builder is in the Examples folder.


Custom Wizards

Overview

Constructor provides a number of wizards for editing most of the commonly used tags. However, this by no means covers all the tags available in HTML, so Constructor provides you with the option of writing your own wizards. These take the form of HTML files using some custom tags. The wizard is displayed when the user selects the appropriate tag, right-clicks on it and selects the Edit in Wizard... menu item. This menu item is only available when tags for which there is a built-in wizard or a custom wizard is available for editing the tag. For more information, see the topic on tag editing.

Details

To write your own wizard, create a HTML file and save it to the Wizards folder in the Constructor folder with the name of the tag it is designed to edit, for example if you were writing a wizard for the <INPUT> tag, save the file as input.html.

The only tags which are recognised in custom wizards are the <title> and </title> pair, a custom version of the <input> tag, and <br> tags. Any other tags or text is ignored.

The text between the <title> and </title> tags is shown in the title bar of the wizard window. Any controls created using the <input> tags are placed in a list, but if you want to start the list again at the top creating another column, you can do this using the <br> tag.

There are several different controls you can use for editing the parameters of the tag using the <input> tag. These are the simple text box, a text box with a Browse... button next to it for selecting files, a number box with up and down arrows for changing the number, a drop down list box, and a colour button. You can create these by setting the “type” parameter of the <input> tag in the way described below.

<input type="text" name="parameter1"> creates a text box which will edit the value of “parameter1” in the tag.

<input type="file" name="parameter2"> creates a text box with a Browse... button next to it. This edits the value of “parameter2” in the tag.

<input type="number" name="parameter3"> creates a numerical edit box which changes the value of “parameter3”.

<input type="select" name="parameter4" options="1;2;3;4;"> creates a drop-down list with the pre-defined values 1, 2, 3 and 4. This changes the value of “parameter4”. Values other than 1, 2, 3 and 4 can also be entered manually.

<input type="color" name="parameter5"> creates a colour button which, when clicked, displays the colour picker window. This is converted to a hexadecimal code which is inserted as the value of “parameter5”.

The custom wizard file:

<title>HTML Wizard</title>

<input type="text" name="parameter1">

<input type="file" name="parameter2">

<br>

<input type="number" name="parameter3">

<input type="select" name="parameter4" options="1;2;3;4;">

<input type="color" name="parameter5">

will be displayed as shown in the picture below.


Tag Editing

Overview

All of the wizards allow you to create tags in your documents, but sometimes you may want to change the value of various parts of the tag. You may find it easy to do this manually, but Constructor also allows you two other options – use the Current Tag Editor or edit the tag in the original wizard.

Details

Possibly the easiest option is to edit the tag in the original wizard. To do this, first select the tag you want to edit, including the < and > parts, right-click on it and click on the Edit in Wizard... menu item. If this is not available, either there is no wizard available in Constructor to edit the tag, or the wizard which is available to create the tag cannot be used to edit it. In this case, you have two further options. You can either write your own wizard, or use the Tag Editor.

To use the tag editor, right-click on the tag again after having selected it and click on the Edit Tag menu item. This will display the Current Tag Editor in the pane on the left of the main editing window and fill in the grid with the details of the selected tag. You can then click on the parameter you want to change the value of in the grid, then either enter or select a new value using the drop-down list box above the grid. When you have finished editing the tag, click on the Apply Changes button to convert the information back to a tag and replace the existing tag with the new one.

Instead of using the tag editor, you can also place the text cursor inside the tag after having selected the Edit Tag menu item, and continue to type the tag in. The tag prompting feature will be available to use as if you were typing the tag in from scratch.


Tag Prompting

Overview

While Constructor does provide a large number of wizards and toolbars to help you create the tags you need, there may be a time where you need to use a tag which does not have an associated wizard. In this case, you will have to type the tag in yourself. However, when you press the < key to start the tag, you will probably notice a list box which pops up, containing the names of all the available tags. This is part of the tag prompting feature. This feature includes a number of list boxes which include all the information you need to create the tag, and the list boxes pop up and disappear when you get to appropriate stages in typing in the tag.

Details

When you press the < key, a list box pops up containing the names of all the available tags. You can either continue to type the tag in, ignoring the list, or you can select an item from the list by double-clicking on it. In this case, the name of the tag is inserted into your page. If you now press Space to type in a parameter to the tag, another list pops up containing the names of all the allowable parameters for that tag. After inserting the parameter by either typing or selecting an item from the list, you will then press = to set it’s value. Another list will pop up containing all the available values for that parameter, unless any text can be assigned to it.

You can also use the tag prompting feature to edit existing tags as described in the tag editing topic.

If you don’t like the intrusion of the list boxes, you can disable them in the Constructor Settings wizard.


Feedback

We always welcome feedback from users as it helps us improve the product by hearing about both what you do and don’t like. Please send any bug reports, suggestions or comments to us by e-mail at constructor@mutantpenguin.net.


Registration

If you have not yet registered your copy of Constructor, then you have only 30 days from the day you installed it to try it out and see if it meets your needs. If you decide you want to continue using Constructor, then you must register. Registration cost $20 and entitles you to unlimited, royalty-free use of Constructor and it’s associated programs, and free upgrades up to one whole version higher than the one you registered. You can find details of how to register at The Mutant Penguin Network (http://www.mutantpenguin.net/). You can register either online using your credit card, by phone or fax using your credit card again, or by cheque. Details of phone numbers, fax numbers and addresses are on the web site.


Domain Registration

A domain on the Internet is basically one of the names you see so often that you type into your browser. www.mutantpenguin.net is composed of three domains. The top level domain, net, includes all international pages relating to the internet or networks. The second level domain, mutantpenguin, includes all the information about The Mutant Penguin Network. The third level domain, www, includes all the information about The Mutant Penguin Network which is on the World Wide Web. If you want one of these domains for your pages, you need to register it with one of the companies on the Internet which deal with such registrations. The Mutant Penguin Network has a relationship with one such company, Capital Networks, which allows you to register domains. You can do this through the Domain Registration wizard in the Tools menu in Constructor.

When you have registered your domain, you need some web space to hold the actual pages on which are going to be accessed through your domain. Again, you can do this through the Domain Registration wizard. You can just enter the amount of web space you need, in multiples of 10MB. For most people, 10MB will be sufficient for just holding web pages and images on.

You may already have some web space, given to you by your Internet Service Provider. If this is the case, you may not want to rent more web space, but get your domain pointing to your existing web space. You can do this with a service known as web forwarding. All requests to your domain are forwarded to your own web space. This service is also available from the Domain Registration wizard.

All of these services cost money, so to buy them from the Domain Registration wizard you will need a credit card.


Inline Frame Wizard

Overview

An inline frame is essentially the same as a normal frame, which can be made with the frame wizard. However, while these frames divide up the entire browse window, an inline frame can be placed as a box in the middle of another page. These frames can be made with the Inline Frame Wizard, accessible from the Insert | Inline Frame menu item.

Details

After loading the wizard, the first piece of information that you should enter is the address of the file to place within the frame. After this information is entered, you can then set up exactly how the box containing this file will be displayed.

Normally you will want the box to be static, so you can leave the “Allow frame to be resized”. If you want the reader to be able to change the size of the frame, check this option.

If the page in the frame is too big to be shown at once, the reader will need scroll bars to see the rest of the page. The default options of showing scroll bars only when needed will show scroll bars only if the page is too big to be displayed. To override this, you can either uncheck the option altogether, to stop scroll bars ever being shown, or change the option selected in the drop-down box to always show scroll bars.

If you want the file within the frame to blend into the page containing the frame, leave the “Show border around frame” option unchecked. Turning it on displays a border the specified number of pixels wide.

Click on Next to see more options. These options are identical to those described in the Image Wizard topic.

Click on the Finish button to insert the frame into your page.